<template>
  <div>
    <!-- 地图 -->
    <Map />
    <!-- 遮罩层按钮 -->
    <!-- <Cars /> -->
    <Nav />
    <!-- 会员视图区域 -->
    <!-- <div id="children-view" :class="[show ? 'open' : '']"> -->
    <div id="children-view" :class="{ open: show }">
      <router-view />
    </div>
  </div>
</template>
<script>
  import Map from "../amap/amap.vue"
  import Cars from "../cars/index.vue"
  import Nav from "../../components/navBar/index.vue"
  export default {
    name: "Index",
    components: { Map, Cars, Nav },
    data() {
      return {
        // show: false,
      }
    },
    watch: {
      // $route: {
      //   handler(newVal) {
      //     // console.log(newVal);
      //     const routeName = newVal.name
      //     this.show = routeName === "Index" ? false : true
      //     console.log(this.show)
      //   },
      // },
    },
    computed: {
      show() {
        const route = this.$route
        return route.name === "Index" ? false : true
      },
    },
    mounted() {
      document.addEventListener("mouseup", (e) => {
        // console.log(e)
        const userCon = document.getElementById("children-view")
        // 是否包含目标值
        if (userCon && !userCon.contains(e.target)) {
          this.$router.push({
            name: "Index",
          })
        }
      })
    },
  }
</script>
<style lang="scss">
  #children-view {
    position: fixed;
    top: 0;
    bottom: 0;
    right: -350px;
    z-index: 1000;
    width: 350px;
    background-color: #34393f;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    &.open {
      right: 0;
    }
  }
</style>
